<template>
  <div
    class="flex flex-col gap-[1.25rem] w-full h-full cursor-pointer"
    v-bind="$attrs"
  >
    <div class="flex items-center justify-between">
      <div class="flex items-center gap-0.5rem">
        <img class="w-1.38rem" style="object-fit: contain" :src="liveOpen" />
        <span class="text-1.13rem leading-1.56rem">Live Open</span>
      </div>
      <div class="_play-btn" @click="onChangeStatus">
        <span v-if="playStatus" class="iconfont icon-zanting"></span>
        <span v-else class="iconfont icon-bofang1 _play"></span>
      </div>
    </div>
    <div class="flex-1 h-0 overflow-hidden">
      <transition-group
        tag="div"
        class="relative h-full overflow-hidden"
        name="list"
      >
        <div
          v-for="item in showLiveOpens"
          :key="item.index"
          class="_live-open-list"
          @click="onOpenModal(item)"
        >
          <div class="_live-open-item">
            <div class="_live-open-img-wrapper">
              <div
                class="absolute top-0 left-0 right-0 bottom-0"
                :style="item.background"
              />
              <img
                class="w-full h-full"
                style="object-fit: contain"
                :src="item.image"
              />
            </div>
            <div class="flex-1 w-0 text-0.88rem">
              <div
                class="mb-1.06rem whitespace-nowrap text-ellipsis overflow-hidden leading-1.25rem"
              >
                {{ item.name }}
              </div>
              <div style="width: 100%; overflow: hidden">
                <div class="_price-btn">
                  <span class="relative">$</span>
                  <span>{{ item.amount }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </transition-group>
    </div>
  </div>

  <product-detail
    v-model:open="modalToggleInfo.toggle"
    :record="modalToggleInfo.record"
    @clear="modalToggleInfo.record = {}"
  />
</template>

<script lang="tsx" setup>
import { getLiveOpen } from "@/api/home";
import liveOpen from "@/assets/live-open.png";
import ProductDetail from "@/components/ProductDetail/productDetail.vue";
import { useModalToggle } from "@/hooks/useModalToggle";

import { backgorunds, liveOpenProps } from "./liveOpen";

const props = defineProps(liveOpenProps);
const { modalToggleInfo, onOpenModal } =
  useModalToggle<API.Home.LiveOpenItem>();

const playStatus = ref(true);
const timer = ref<number>();
const liveOpens = ref<API.Home.LiveOpenItem[]>([]);
const showLiveOpens = ref<API.Home.LiveOpenItem[]>([]);

const liveOpenDatas = computed(() => {
  if (liveOpens.value.length > 0) {
    return liveOpens.value;
  }
  return props.liveOpens;
});

function startLiveOpen() {
  timer.value = window.setTimeout(async () => {
    window.clearTimeout(timer.value);
    const last = showLiveOpens.value.pop();
    showLiveOpens.value = [
      {
        ...last,
        index: last.index + 1,
      },
      ...showLiveOpens.value,
    ];
    startLiveOpen();
  }, Math.random() * 1000 * 10);
}

function onChangeStatus() {
  if (playStatus.value) {
    window.clearTimeout(timer.value);
  } else {
    startLiveOpen();
  }
  playStatus.value = !playStatus.value;
}

async function getLiveOpens() {
  liveOpens.value = await getLiveOpen();
}

watchEffect(async () => {
  if (liveOpenDatas.value.length !== 0) {
    showLiveOpens.value = [...liveOpenDatas.value, ...liveOpenDatas.value].map(
      (item, idx) => {
        return {
          ...item,
          index: idx,
          background:
            backgorunds[
              (item.id + Math.ceil(Math.random() * 10)) % backgorunds.length
            ],
        };
      }
    );
    startLiveOpen();
  }
});

onBeforeMount(() => {
  if (props.isRequestLiveOpens) {
    getLiveOpens();
  }
});
</script>

<style lang="less" scoped>
.list-move,
.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}

.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateY(-100%);
}

.list-leave-active {
  position: absolute;
}

._play-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.44rem;
  height: 1.44rem;
  background-color: #353636;
  border-radius: 50%;
  span {
    color: #909090;
    font-size: 0.7rem !important;
    &._play {
      @apply text-primary;
      font-size: 1rem !important;
    }
  }
}

._live-open-list {
  padding-bottom: 1.25rem;
  ._live-open-item {
    @apply flex items-center overflow-hidden;
    gap: 0.5rem;
    padding: 0 0.75rem;
    aspect-ratio: 14.06/6.25;
    min-height: 0;
    border-radius: var(--el-border-radius-base);
    background-color: var(--realbox-bg-box);
    ._live-open-img-wrapper {
      @apply relative h-full;
      padding: 0.38rem 0;
      aspect-ratio: 1 / 1;
      min-height: 0;
    }
  }
}

._price-btn {
  @apply inline-flex items-center bg-hex-353636;
  line-height: 1.56rem;
  font-size: 1.13rem;
  gap: 0.2rem;
  padding: 0.19rem 0.94rem;
  border-radius: var(--el-border-radius-base);
  min-width: 60%;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
